<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>
<style>
    html{
        font-size: 22px;
        height: 100vh;
        background-image: url(image/hy.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed;
    }

    body {
        height: 100%;
        background-color: rgb(225,225,225,0.4);
    }

    header h2 {
        text-align: center;
        padding: 10px;
    }

</style>

<body>
<header>
    <h2>信息表</h2>
</header>
<section>
    <article class="container-sm">
        <form method="post" action="/register" class="py-2 border-top border-4 fs-6 needs-validation" novalidate>
            <div class="row mb-4">
                <label for="inputName" class="col-3 col-form-label">姓名</label>
                <div class="col-9">
                    <input type="text"  name="name" class="form-control bg-transparent" id="inputName" aria-describedby="emailHelp">
                </div>
            </div>
            <fieldset class="row mb-4">
                <legend class="col-form-label col-3 pt-0">性别</legend>
                <div class="col-9">
                    <div class="form-check">
                        <input class="form-check-input bg-transparent" type="radio" name="sex" id="boy" value="boy" checked>
                        <label class="form-check-label" for="boy">
                            男
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input bg-transparent" type="radio" name="sex" id="girl" value="girl">
                        <label class="form-check-label" for="girl">
                            女
                        </label>
                    </div>
                </div>
            </fieldset>
            <div class="row mb-4">
                <label for="constellation" class="col-3 pt-1">星座</label>
                <div class="col-9">
                    <select class="form-select bg-transparent" id="constellation" name="constellation">
                        <option selected disabled>点击选择星座</option>
                        <option value="Aries">白羊座</option>
                        <option value="Taurus">金牛座</option>
                        <option value="Gemini">双子座</option>
                        <option value="Cancer">巨蟹座</option>
                        <option value="Leo">狮子座</option>
                        <option value="Virgo">处女座</option>
                        <option value="Libra">天秤座</option>
                        <option value="Scorpio">天蝎座</option>
                        <option value="Sagittarius">射手座</option>
                        <option value="Capricorn">摩羯座</option>
                        <option value="Aquarius">水平座</option>
                        <option value="Pisces">双鱼座</option>
                    </select>
                </div>
            </div>
            <div class="row mb-4">
                <label for="phone" class="col-3 col-form-label">手机</label>
                <div class="col-9">
                    <input type="text" name="phone" class="form-control bg-transparent" id="phone">
                </div>
            </div>
            <button type="reset" class="btn btn-danger">取消</button>
            <button type="submit" class="btn btn-success float-end" id="submit">提交</button>
        </form>
    </article>
</section>

<script>
    let btn = document.getElementById('submit');
    btn.addEventListener('click', handleSubmit);
    // 点击提交
    function handleSubmit() {
    }
</script>
</body>

</html>